<template>
  <div
    class="px-1.5 py-2 flex items-center bg-amber-50 rounded gap-2 mb-3 text-amber-500"
    :class="href&&'cursor-pointer'"
    @click="open"
  >
    <el-icon class="text-xl">
      <warning-filled />
    </el-icon>
    <span>
      {{ title }}
    </span>
  </div>
</template>
<script setup>
import { WarningFilled } from "@element-plus/icons-vue"
const prop = defineProps({
  title: {
    type: String,
    default: ""
  },
  href: {
    type: String,
    default: ""
  }
})

const open = () => {
  if (prop.href) {
    window.open(prop.href)
  }
}
</script>
<style lang="scss" scoped>
.text-amber-500 {
	--tw-text-opacity: 1 !important;
	color: rgb(245 158 11) !important;
}
.py-2 {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

.px-1\.5 {
	padding-left: 0.375rem !important;
	padding-right: 0.375rem !important;
}

.bg-amber-50 {
	--tw-bg-opacity: 1 !important;
	background-color: rgb(255 251 235) !important;
}
</style>
